<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
        <h1>学生列表</h1>
    <table id="tbl" width="80%" border="1" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>分数</th>
                <th>出生</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        $.ajax("list",{
            type: "get",
            dataType: "json",
            success: function (listArr) {
                for (var i = 0; i < listArr.length; i++) {
                    var tr = $("<tr></tr>");
                    var td1 = ($("<th>"+listArr[i].name+"</th>"));
                    var td2 = ($("<th>"+listArr[i].age+"</th>"));
                    var td3 = ($("<th>"+listArr[i].score+"</th>"));
                    var td4 = ($("<th>"+listArr[i].born+"</th>"));
                    var td5 = ($("<th><a href='edit.html?id="+listArr[i].id+"'>编辑</a>"))
                    tr.append(td1);
                    tr.append(td2);
                    tr.append(td3);
                    tr.append(td4);
                    tr.append(td5);
                    console.log(listArr[i]);
                    $("#tbl tbody").append(tr);
                }
            }
        })
    </script>
</body>
</html>